<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2019/7/19
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="../Css/css.css">
<script src="../Js/jquery.min.js"></script>
<script>
    var currentPage = 0;//当前页默认值为0
    var pageIndex = 0 ;
    $(function(){
        var $table = $('table');
        var pageSize = 5;//每一页显示的数目
        $table.bind('paging',function(){
            $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
        });
        var sumRows = $table.find('tbody tr').length;
        var sumPages = Math.ceil(sumRows/pageSize);//总页数

        var $pager = $('<div class="page"></div>');  //新建div，放入a标签,显示底部分页码
        for( ;pageIndex<sumPages ; pageIndex++){
            $('<a href="#" id="pageStyle" onclick="changCss(this)"><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){
                currentPage = event.data["newPage"];
                $table.trigger("paging");
                //触发分页函数
            }).appendTo($pager);
            $pager.append(" ");
        }
        function shang() {


        }



        $pager.insertAfter($table);
        $table.trigger("paging");

        //默认第一页的a标签效果
        var $pagess = $('#pageStyle');
        $pagess[0].style.marginLeft="50%";
        $pagess[0].style.marginTop="19%";
        $pagess[0].style.backgroundColor="#006B00";
        $pagess[0].style.color="#ffffff";
    });

    //a链接点击变色，再点其他回复原色
    function changCss(obj){
        var arr = document.getElementsByTagName("a");
        for(var i=0;i<arr.length;i++){
            if(obj==arr[i]){       //当前页样式
                obj.style.backgroundColor="#006B00";
                obj.style.color="#ffffff";
            }
            else
            {
                arr[i].style.color="";
                arr[i].style.backgroundColor="";
            }
        }
    }
    function chk() {
        var all = document.getElementById("allw");
        var mychk = document.getElementsByName("onew");
        if (all.checked == true) {
            if (mychk.length) {
                for (var i = 0; i < mychk.length; i++) {
                    mychk[i].checked = true;
                }
            }
            mychk.chcked = true;
        } else {
            if (mychk.length) {
                for (var i = 0; i < mychk.length; i++) {
                    mychk[i].checked = false;
                }
            }
        }
    }
    function clo(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
    function add(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block';
    }
    var addUser = function(params){
        $.ajax({
            type:"get",
            async:"true",
            url:"http://192.168.30.120:8080/column/addcolumn",
            dataType:"json",
            data:params,
            success:function(data){
                alert("success");
            },
            error:function(data){
                alert("error");
            }
        });
    }

    var getParams = function(){
        var params = {};
        params["column"] = $("#tian").val();
        return params;
    }

    $(document).ready(function(){
        $("#addlanmu").on("click",function(){
            addUser(getParams());
        });
    });

    $(function() {
        $.ajax({
            async: "true",
            url: 'http://192.168.30.120:8080/column/selectcolumn',
//					data:"[{'name':'1', 'result'':'60''}]",
            type: 'get',
            dataType: 'json',
            success: function (json) {
                var item;
                $.each(json, function (i, result) {
                    item = "<tr><td>" + result['column_id'] + "</td><td>" + result['column_name'] + "</td></tr>";
                    $('.table').append(item);
                });
            }
        })
    });
</script>
<style>
    table{
        margin:  auto;
        width:600px;
        text-align:center;
    }
    table tr th,td{
        height:30px;
        line-height:30px;
        border:1px solid #ccc;
    }
    #pageStyle{
        display:inline-block;
        width:32px;
        height:32px;
        border:1px solid #CCC;
        line-height:32px;
        text-align:center;
        color:#999;
        text-decoration:none;

    }
    #pageStyle:hover{
        background-color:#CCC;
    }
    #pageStyle .active{
        background-color:#0CF;
        color:#ffffff;
    }


</style>
<body>

<div class="div00">
    <div class="divi">栏目管理</div>
    <div class="buthi">
        <div class="addlan"><input type="button" onclick="add()" value="添加栏目" id="add" class="addlanbut" style="border-radius: 6px"></div>
        <div class="addlan1"><input type="button" onclick="delg()" value="删除栏目" id="del" class="addlanbut1" style="border-radius: 6px"></div>
    </div>
    <table cellspacing="0" class="table">
        <thead>
        <tr>
            <th class="chx" ><input type="checkbox" id="allw" onclick="chk()"></th>
            <th>栏目</th>
            <th>文章数</th>
        </tr>
        <tbody>
        <tr>
            <td><input type="checkbox" name="onew"></td>
            <td>1</td>
            <td>2</td>

        </tr>
        <tr>
            <td><input type="checkbox" name="onew"></td>
            <td>1</td>
            <td>2</td>
        </tr>
        </tbody>
        </thead>
    </table>
</div>
<div id="light" class="white_content" style="border-radius: 6px">
    <div class="white_content1" >添加栏目</div>
    <div class="white_content2">标题：</div>
    <div class="white_content3"><input type="text" id="tian" class="white_content31" style="border-radius: 3px"> </div>
    <div class="white_content4"><input type="button" onclick = "clo()" value="关闭" class="white_content41" style="border-radius: 3px"><input type="submit" id="addlanmu" value="添加" class="white_content41" style="border-radius: 3px"></div>

</div>
<div id="fade" class="black_overlay" ></div>
</body>
</html>